<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/echarts.min.js"></script>
</head>
<body>
    <div>
        {{data_number.a}}
    </div>
    <div id="main" style="color: powderblue; width: 600px;height: 600px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"))
        var option;

option = {
    dataset: [{
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
            [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
            ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
            [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
            ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
            [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
            [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
            ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
            [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
            ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
        ]
    }, {
        transform: {
            type: 'sort',
            config: { dimension: 'score', order: 'desc' }
        }
    }],
    xAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 },
    },
    yAxis: {},
    series: {
        type: 'bar',
        encode: { x: 'name', y: 'score' },
        datasetIndex: 1
    }
};

 myChart.setOption(option);
    </script>
</body>
</html>